<!DOCTYPE html>
<html>
<head>
    <#import "spring.ftl" as spring />
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>忘记密码</title>
    <link rel="icon" href='<@spring.message code="logo_favicon"/>' />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/dropkick.css">
    <script language="JavaScript" type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/iCheck.min.js"></script>
    <script type="text/javascript" src="js/dropkick.min.js"></script>
</head>
<body>
<div class="loginDiv loginDivHgt">
    <div class="divBg"></div>
    <canvas id="canvas" class="canvas" width="495" height="900"></canvas>
    <div class="header">
        <div class="wtn">
            <a href="${request.contextPath}" class="logo"></a>
        </div>
    </div>
    <div class="loginCont forgetHgt">
        <div class="word">
            <div>
                <h3><@spring.message code="h3"/></h3>
                <p><@spring.message code="p"/></p>
            </div>
        </div>
        <div class="loginBox pos" id="changeBox">
            <span class="wxBox">
                <span class="wxDiv"><img src="images/zhifubao.png" /><font><@spring.message code="app" /></font></span>
                <span class="wxDiv"><img src="images/weixin.png" /><font><@spring.message code="wx" /></font></span>
            </span>
            <span class="registerFont"><font>忘记密码</font></span>
            <p class="tipBox pos">
                <label class="passbox error" id="errorPlace"></label>
            </p>
            <div class="loginStep">
                <form action="user/forgetPassword" id="addForm" method="post" onsubmit="return false">
                    <div class="loginIn">
                        <span class="icoBg"><span class="loginUser"></span></span>
                        <input type="text" id="userName" name="userName" maxlength="30" placeholder="请输入用户名" />
                    </div>
                    <div class="loginIn">
                        <span class="icoBg"><span class="loginPhone"></span></span>
                        <input type="text" id="email" name="email" placeholder="请输入邮箱号码" class="inputWid fl" />
                        <button id="countdowm_button" onclick="getValidateCode(2);return false;" class="loginBtn sendCode">发送验证码</button>
                    </div>
                    <div class="loginIn">
                        <span class="icoBg"><span class="loginYzm"></span></span>
                        <input type="text" id="validateCode" name="validateCode" placeholder="请输入邮箱验证码" />
                    </div>
                    <div class="loginIn">
                        <span class="icoBg"><span class="loginMail"></span></span>
                        <input type="text" name="receiveEmail" id="receiveEmail" placeholder="请输入用于接收新密码的邮箱" />
                    </div>
                    <div class="btnBox btnBoxPad">
                        <input type="button" class="loginBtn" id="forgetPwd" value="下一步">
                    </div>
                </form>
                <div class="lastBox lastBoxRig">
                    我记的账号信息，<a href="${request.contextPath}/login?redirect_url=${service}" class="commonHref">立即登录</a>
                </div>
            </div>
        </div>

        <!--注册成功开始-->
        <div id="successBox" class="loginBox forgetBox pos" style="display:none;">
            <div class="loginStep center">
                <span class="successIco"></span>
                <p class="successCont">重置后的密码已发送到您指定的邮箱，请查收！</p>
                <p class="succesSkip"><span id="totalSecond">5</span>秒之后跳转到登录页面，点击完成按钮立即登录！</p>
                <div class="btnBox">
                    <input type="submit" onclick="skip()" class="loginBtn" value="完成">
                </div>
            </div>
        </div>
        <!--注册成功结束-->
    </div>
    <div class="foot">
        <p class="fPhone"><@spring.message code="phone"/></p>
        <#if copyright??>
            <p>${copyright}</p>
        </#if>
    </div>
</div>

<script type="text/javascript" src="js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validate/localization/messages_cn.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery-validate-extend.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/jquery.selectlist.js"></script>
<script type="text/javascript" src="js/register.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<script type="text/javascript">
    var service = '${service}';
    if(service==null || service==''){
        service='${request.contextPath}';
    }

    function skip(){
        location.href = service;
    }
    $("#forgetPwd").bind("click",function(){
        $("#forgetPwd").attr("disabled", true);
        $("#forgetPwd").css("background","#cbcbcb");
        var receiveEmail = $("#receiveEmail").val();
        var email = $("#email").val();
        if(receiveEmail===email){
            $("#errorPlace").html("接收验证码邮箱和接收密码邮箱不能一致");
            return ;
        }
        var condition={
            "userName":$("#userName").val(),
            "receiveEmail":$("#receiveEmail").val(),
            "email":$("#email").val(),
            "validCode":$("#validateCode").val()
        }
        $.ajax({
            url : "doRepwd",
            data : JSON.stringify(condition),
            contentType: "application/json",
            dataType : 'json',
            type : "post",
            success : function(data) {
                if(data.code==200){
                    $("#successBox").show() ;
                    $("#registerBox").hide() ;
                    var i = $("#totalSecond").html();
                    var f = setInterval(function(){
                        $("#totalSecond").html(i--);
                        if(i<=0){
                            location.href = service;
                            clearInterval(f);
                        }
                    },1000);
                }else{
                    $("#errorPlace").html(data.msg);
                }
                $("#forgetPwd").attr("disabled", false);
                $("#forgetPwd").css("background","#ef3826");
            }
        });

    });
    var msessageMap = {};
    $("#addForm").validate({
        // 鼠标离开时校验
        onfocusout : function(element) {
            $(element).valid();
        },
        onkeyup:false,
        focusCleanup:true,
        errorPlacement: function(error, element) {
        },
        showErrors: function(errorMap, errorList) {
            msessageMap = $.extend(msessageMap, errorMap);
            $(errorList).each(function(i, v){
                var element = this.element;
                if(element){
                    var elementName = element.name;
                    $(element).parent().addClass("red_border");
                    if(elementName == "picCodeInput" && $("#picCodeInput").val()!=""){
                        changePic();
                    }
                }
                if(i == 0){
                    $("#errorPlace").show();
                    $("#errorPlace").html(msessageMap[elementName]);
                }
            });
            this.defaultShowErrors();
        },
        rules : {
            userName : {
                required : true,
                maxlength : 30
            },
            email :{
                maxlength : 30,
                required : true,
                email: true
            },
            validateCode : {
                required : true,
            },
            receiveEmail : {
                email: true,
                required : true
            }
        },
        messages : {
            userName: {
                required: "请输入用户名",
                maxlength: "用户名最大长度是{0}",
                remote: "用户名已经存在"
            },
            email :{
                required : "请填写邮箱号码",
                maxlength : "请填写正确的邮箱号",
                email: "必须输入正确格式的电子邮件"
            },
            validateCode : {
                required : "请输入短信验证码",
                remote: "短信验证码错误"
            },
            receiveEmail : {
                email: "必须输入正确格式的电子邮件",
                required : "请填写邮箱"
            }
        }
    })
</script>
</body>
</html>
